<template>
  <el-main id="user_el_main">
    <div class="container_box">
      <div class="header">
        <el-tooltip  effect="dark" content="点击更换头像" placement="top">
           <img :src="userdata.Avatar" alt="" class="header_avatar" @click="dialogAvatarVisible=true">
        </el-tooltip>
        <div class="header_info">
          <strong class="header_name">{{userdata.username}}</strong>
          <div class="desbox">
            <p class="desbox_introduce">{{userdata.introduce}}</p>
          </div>
          <div class="info_edit">
            <a class="btn btn_default" @click.stop="dialogFormVisible=true">编辑资料</a>
          </div>
        </div>
      </div>
      <div class="extend_box">
        <div class="extend_box_left">
          <div class="like_box">
            <div>
              <div class="like_box_hd">
                <el-image fit="cover" :src="likeSrc" class="like_icon"></el-image>
                <span style="font-size: 20px;">获得过0次赞</span>
              </div>
              <div class="like_box_body">
                <div class="like_box_body_item">
                  <p class="like_box_body_item_label">回答过的问题获得 0 次赞</p>
                </div>
                <div class="like_box_body_item">
                  <p class="like_box_body_item_label">评论获得 0 次赞</p>
                </div>
                <div class="like_box_body_item">
                  <p class="like_box_body_item_label">反馈获得 0 次赞</p>
                </div>
              </div>
            </div>
          </div>
          <div class="attention_box">
            <div>
              <div class="like_box_hd">
                <el-image fit="cover" :src="attentionSrc" class="like_icon"></el-image>
                <span style="font-size: 20px;">我关注的人</span>
              </div>
              <div class="like_box_body">
                <div class="like_box_body_item">
                  <p>暂时谁也看不上!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="extend_box_right">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="回答" name="first">
                <ul>
                  <li class="post_item" v-for="(item,i) in AnswerpostArray" :key="item.id">
                    <router-link to="/communityPostRead">
                      <h2 class="post_title" @click="sendCollectionPostData(i)">{{item.title}}</h2>
                    </router-link>
                    <p class="post_desc">
                      <el-tag effect="plain" type="danger" style="margin-right: 10px">简介</el-tag>{{item.briefInfo}}
                    </p>
                    <div class="post_tags_container">
                      <span class="post_tag" v-for="(tagItem) in item.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
                    </div>
                    <div class="post_info">
                      <div class="post_author_container">
                        <img :src="userdata.Avatar" alt="" class="post_author_avatar">
                        <p class="post_author_info"><span class="post_author_nickname">{{item.username}}
                            <!----></span></p>
                      </div>
                      <div class="post_time post_info_meta">{{item.create_time | dateFormat}}</div>
                      <div class="post_info_extend">
                        <span class="post_info_meta">
                          <el-badge :value="item.like" class="item" :max="99">
                            <el-button size="small">点赞</el-button>
                          </el-badge>
                        </span>
                        <span class="post_info_meta">
                          <el-badge :value="item.comments.length" class="item" :max="99">
                            <el-button size="small">评论</el-button>
                          </el-badge>
                        </span>
                      </div>
                    </div>
                  </li>
                  <el-divider></el-divider>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="收藏" name="second">
                <ul>
                  <li class="post_item" v-for="(item,i) in postArray" :key="item.id">
                    <router-link to="/communityPostRead">
                      <h2 class="post_title" @click="sendPostData(i)">{{item.title}}</h2>
                    </router-link>
                    <p class="post_desc">
                      <el-tag effect="plain" type="danger" style="margin-right: 10px">简介</el-tag>{{item.briefInfo}}
                    </p>
                    <div class="post_tags_container">
                      <span class="post_tag" v-for="(tagItem) in item.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
                    </div>
                    <div class="post_info">
                      <div class="post_author_container">
                        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="post_author_avatar">
                        <p class="post_author_info"><span class="post_author_nickname">{{item.username}}
                            <!----></span></p>
                      </div>
                      <div class="post_time post_info_meta">{{item.create_time | dateFormat}}</div>
                      <div class="post_info_extend">
                        <span class="post_info_meta">
                          <el-badge :value="item.like" class="item" :max="99">
                            <el-button size="small">点赞</el-button>
                          </el-badge>
                        </span>
                        <span class="post_info_meta">
                          <el-badge :value="item.comments.length" class="item" :max="99">
                            <el-button size="small">评论</el-button>
                          </el-badge>
                        </span>
                      </div>
                    </div>
                  </li>
                  <el-divider></el-divider>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="关注话题" name="third">
                <p>关注话题</p>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input placeholder="请输入用户名" v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个人介绍" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="UserSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="更换头像" :visible.sync="dialogAvatarVisible" width="40%">
      <div style="display: flex;">
        <div class="beforeAvatar" style="height: 170px;width: 120px;margin-left: 105px">
          <p style="margin: 0">更新前</p>
          <img :src="userdata.Avatar" alt="" class="header_avatar_before">
        </div>
        <div style="width: 30%;height: 170px">
          <el-image fit="cover" :src="rightArrowSrc" class="rightArrow_icon"></el-image>
        </div>
        <div class="afterAvatar">
          <p style="margin: 0">更新后</p>
          <el-upload class="avatar-uploader" action="http://localhost:3000/community/posting/uploadImg" :show-file-list="false" :on-success="handleAvatarSuccess">
            <img v-if="updateAvatarImgUrl" :src="updateAvatarImgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAvatarVisible = false">取 消</el-button>
        <el-button type="primary" @click="AvatarSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-tooltip effect="dark" content="回到顶部" placement="top">
      <div @click="backTop()" class="el-backtop" style="right: 80px; bottom: 120px;">
        <i class="el-icon-caret-top"></i>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" content="底部" placement="top">
      <div @click="backBottom()" class="el-backtop" style="right: 80px; bottom: 70px;">
        <i class="el-icon-caret-bottom"></i>
      </div>
    </el-tooltip>
  </el-main>
</template>
<script>
import agreeAfter from '../assets/agreeAfter.png'
import attention from '../assets/attention.png'
import rightArrow from '../assets/rightArrow.png'
export default {
  inject: ['reload'],
  data() {
    return {
      likeSrc: agreeAfter,
      attentionSrc: attention,
      rightArrowSrc: rightArrow,
      activeName: 'first',
      postArray: [],
      AnswerpostArray: [],
      dialogFormVisible: false,
      dialogAvatarVisible: false,
      avatarImgUrl: '',
      updateAvatarImgUrl: '',
      form: {
        username: '',
        introduce: ''
      },
      formLabelWidth: '120px',
      userdata: {}
    }
  },
  created() {
    const token = window.localStorage.getItem('token')
    if (token) {
      this.getPostlist()
      this.getAnswerPostlist()
      this.getUserMessage()
    }
  },
  methods: {
    async AvatarSubmit() {
      const ret = await this.$http.put('/user/updateAvatar', { updateAvatarImgUrl: this.updateAvatarImgUrl })
      if (ret.data.err_code !== 0) {
        this.$message({
          message: '更新头像失败',
          type: 'error'
        })
      }
      this.$message({
        message: '更新头像成功',
        type: 'success'
      })
      console.log(ret.data)
      this.avatarImgUrl = ret.data.AvatarUrl
      this.dialogAvatarVisible = false
      this.reload()
    },
    handleAvatarSuccess(res) {
      if (res.err_code === 0) {
        this.updateAvatarImgUrl = res.result.imageUrl
      }
      if (res.err_code === -1) {
        this.$message({
          message: '只支持jpg和png格式图片',
          type: 'error'
        })
      }
      if (res.err_code === -2) {
        this.$message({
          message: '图片不能超过2M',
          type: 'error'
        })
      }
    },
    async UserSubmit() {
      if (this.form.username === '' || this.form.introduce === '') {
        this.$message({
          message: '用户名和内容都不能为空',
          type: 'warning'
        })
      } else {
        const ret = await this.$http.post('/user/update', this.form)
        if (ret.data.err_code !== 0) {
          console.log('修改用户信息失败')
        }
        console.log(ret.data)
        this.$message({
          message: '修改用户信息成功',
          type: 'success'
        })
        this.getUserMessage()
        this.dialogFormVisible = false
      }
    },
    async getUserMessage() {
      const ret = await this.$http.get('/user/getUserMessage')
      if (ret.data.err_code !== 0) {
        console.log('获取信息失败')
      }
      console.log(ret.data)
      this.userdata = ret.data.data
    },
    sendPostData(i) {
      this.$store.commit({
        type: 'sendPostData',
        PostData: this.postArray[i]
      })
    },
    sendCollectionPostData(i) {
      this.$store.commit({
        type: 'sendPostData',
        PostData: this.AnswerpostArray[i]
      })
    },
    // 获取用户收藏的帖子
    async getPostlist() {
      const ret = await this.$http.get('/community/user/searchCollection')
      if (ret.data.err_code !== 0) {
        console.log('获取收藏的帖子失败')
      }
      console.log(ret.data)
      this.postArray = ret.data.data
    },
    // 获取用户回答的帖子
    async getAnswerPostlist() {
      const ret = await this.$http.get('/community/user/answerPost')
      if (ret.data.err_code !== 0) {
        console.log('获取回答的帖子失败')
      }
      console.log(ret.data)
      this.AnswerpostArray = ret.data.data
    },
    // 处理收藏分区当前页的改变
    handleCurrentChange(newpagenum) {
      this.queryinfo.pageNum = newpagenum
      this.getPostlist()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    backTop() {
      document.getElementById('user_el_main').scrollTop = 0
    },
    backBottom() {
      document.getElementById('user_el_main').scrollTop = document.getElementById('user_el_main').scrollHeight
    }
  }
}

</script>
<style scoped>
.rightArrow_icon {
  height: 70px;
  width: 70px;
  top: 50%;
  margin-top: -26px;
  opacity: .5;
}

.avatar-uploader .el-icon-plus {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-icon-plus:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.post_tag {
  padding: 0 8px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, .5);
  vertical-align: top;
  line-height: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 2px;
  font-size: 12px;
  display: inline-block;
  cursor: default;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ededed;
}

.post_tags_container {
  margin-top: 8px;
}

.post_title {
  font-weight: 400;
  display: block;
  font-size: 20px;
  line-height: 1.25;
  cursor: pointer;
  color: rgba(0, 0, 0, .9);
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 24px;
}

.post_author_container {
  display: inline-block;
}

.post_author_nickname {
  color: #576b95;
}

.post_author_avatar {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  vertical-align: middle;
}

.post_author_info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.post_time {
  margin-left: 14px;
  line-height: 23.3px;
}

.post_info_meta {
  display: inline-block;
  font-weight: 400;
  font-style: normal;
  margin-right: 14px;
  font-size: 14px;
  color: rgba(0, 0, 0, .3);
}

.post_time.post_info_meta {
  margin-left: 14px;
  line-height: 23.3px;
}

.post_info .post_info_extend {
  float: right;
}

.post_info {
  *zoom: 1;
  margin: 0 5px 0 0;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
}

.post_desc {
  color: rgba(0, 0, 0, .5);
  margin: 8px 0 5px;
  overflow: hidden;
  word-break: break-all;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post_item {
  position: relative;
  padding: 14px 0 15px;
}

.extend_box_right {
  display: inline-block;
  width: calc(100% - 320px);
  display: block;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  height: 85vh;
  overflow: auto;
}

.like_box_body_item_label {
  color: rgba(0, 0, 0, .5);
  margin: 0
}

.like_box_body_item {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 17px;
}

.like_box_body {
  padding-left: 24px;
  vertical-align: middle;
  margin-bottom: -10px;
  margin-right: -28px;
  min-height: 180px;
}

.like_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -.2em;
  margin-right: 5px;
  opacity: .5;
}

.like_box_hd {
  margin-bottom: 20px;
}

.like_box {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.attention_box {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.extend_box_left {
  display: inline-block;
  width: 300px;
  margin-right: 20px;
  vertical-align: top;
  box-sizing: border-box;
}

.extend_box {
  width: 100%;
  text-align: left;
  line-height: 0;
  display: flex;
  min-height: 500px;
}

.header_info {
  line-height: 20px;
  text-align: left;
}

.btn_default {
  background-color: #fff;
  background-image: -o-linear-gradient(top, #fff 0, #fff 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#fff));
  background-image: linear-gradient(180deg, #fff 0, #fff);
  color: rgba(0, 0, 0, .9);
  border: none;
  background: #f2f2f2;
}

.btn {
  display: inline-block;
  overflow: visible;
  padding: 0 22px;
  height: 30px;
  line-height: 28px;
  *line-height: 28px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}

.btn {
  min-width: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 22px;
}

.info_edit {
  overflow: hidden;
  margin-top: 12px;
}

.desbox_introduce {
  color: rgba(0, 0, 0, .5);
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.header_name {
  display: inline-block;
  font-size: 20px;
  width: auto;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 25px;
}

.header_avatar {
  position: absolute;
  top: 20px;
  left: 18px;
  width: 120px;
  height: 120px;
  margin-right: 24px;
  display: inline-block;
}

.header_avatar_before {
  width: 120px;
  height: 120px;
  display: inline-block;
}

.header {
  position: relative;
  padding: 20px 374px 20px 162px;
  background-color: #fff;
  margin-bottom: 16px;
  min-height: 120px;
  border-radius: 4px;
}

.container_box {
  width: 80%;
  max-width: 1140px;
  min-width: 960px;
  margin: 0 auto;
  height: 100vh;
  min-height: 700px;
}

</style>
